<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>求职者注册</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="<%=request.getContextPath() %>/static/common/plugin/bootstrap-3.3.5/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="<%=request.getContextPath() %>/static/common/plugin/jquery-1.11/jquery.min.js"></script>
		<!-- 最新的Bootstrap 核心 JavaScript 文件 -->
		<script src="<%=request.getContextPath() %>/static/common/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	</head>
	<body>
	    <!-- 注册失败页面 -->
	    <c:if test="${!empty param.registerError}">
	       <div class="alert alert-danger alert-dismissible" role="alert" style="text-align:center;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <strong>注册失败</strong> 
           </div>
	   </c:if>
	<center><h1> 求职者注册 </h1></center>
		<hr>
		<form action="<%=request.getContextPath() %>/TalentServlet?command=register" method="post" onsubmit="return validate();">
		  <div class="form-group">
		    <input type="text" class="form-control" id="code" name="code" placeholder="帐号..." autofocus="autofocus" value="${requestScope.talent.code }">
		  <span id="codeInfo"></span>
		  </div>
		  <div class="form-group">
		    <input type="password" class="form-control" id="password" name="password" placeholder="密码..." >
		  <span id="passwordInfo"></span>
		  </div>
		   <div class="form-group">
		    <input type="password" class="form-control" id="rePassword" name="rePassword" placeholder="确认密码..." >
		   <span id="rePasswordInfo"></span>
		  </div>
		   <div class="form-group">
		    <input type="text" class="form-control" id="name" name="name" placeholder="姓名..." value="${requestScope.talent.name }">
		   <span id="nameInfo"></span>
		  </div>
		  <div class="form-group">
		    <input type="text" class="form-control" id="phone" name="phone" placeholder="电话..." value="${requestScope.talent.phone }">
		   <span id="phoneInfo"></span>
		  </div>
		   <div class="form-group">
		    <input type="text" class="form-control" id="email" name="email" placeholder="邮箱..." value="${requestScope.talent.email }">
		   <span id="emailInfo"></span>
		  </div>
		  <div class="form-group">
		  	 <select class="form-control" id="age" name="age" >
		  	 	<option value="">-请选择年龄-</option>
		  	 	<script>
		  	 		for (var i = 20; i <= 50; i++) {
		  	 			// 如果要在JS代码上写EL，这个JS代码就必须要写在JSP页面上并且EL还得使用引号，不能使用外部引入！
		  	 			var age = '${requestScope.talent.age }';
		  	 			if (i == age) {
			  	 			document.write('<option selected="selected">' + i + '</option>');
		  	 			} else {
			  	 			document.write('<option>' + i + '</option>');
		  	 			}
		  	 		}
		  	 	</script>
		  	 </select>
		    <span id="ageInfo"></span>
		  </div>
		   <div class="form-group">
   			<label for="examplegender">性别</label>
		  <label class="radio-inline" >
			  <input type="radio" name="gender" id="inlineRadio1" value="1" checked="checked"> 男
			</label>
			<label class="radio-inline">
			  <input type="radio" name="gender" id="inlineRadio2" value="2"> 女
			</label>
			  </div>
			  <div class="form-group">
   			<label for="hobby">爱好</label>
		    <label class="checkbox-inline">
			  <input type="checkbox"  name="hobby" value="C语言"> C语言
			</label>
			<label class="checkbox-inline">
			  <input type="checkbox"  name="hobby" value="java"> java
			</label>
			<label class="checkbox-inline">
			  <input type="checkbox"  name="hobby" value="php"> php
			</label>
			</div>
		  <input type="submit" class="btn btn-success" value="注册">
		  <input type="button" class="btn btn-primary" onclick="location='<%=request.getContextPath() %>/view/talent/login.jsp'" value="已有账号"/>
		</form>
				<script>
				/**
				  *checkbox回显
				  */
				var hobby = '${requestScope.talent.hobby}';
				if(hobby && '${requestScope.talent}'){
				var hobbies = hobby.split('|');	
				var allHobbies = document.getElementsByName('hobby');
					$(":checkbox").val(hobbies);
				}
				/**
				  *表单验证
				  */
				function validate() {
					var result = true;
					var codeDOM = document.getElementById('code');
					var passwordDOM = document.getElementById('password');
					var rePasswordDOM = document.getElementById('rePassword');
					var nameDOM = document.getElementById('name');
					var phoneDOM = document.getElementById('phone');
					var emailDOM = document.getElementById('email');
					var ageDOM = document.getElementById('age');
					
					if(codeDOM.value==''){
						document.getElementById('codeInfo').innerHTML='<div class="alert alert-warning" role="alert">账号不能为空！</div>';
						result = false;
					}else{
						document.getElementById('codeInfo').innerHTML='';
				     }
					if(passwordDOM.value==''){
							document.getElementById('passwordInfo').innerHTML='<div class="alert alert-warning" role="alert">密码不能为空！</div>';
							result = false;
				   }else{
					document.getElementById('passwordInfo').innerHTML='';
				    }
				    if(passwordDOM.value != rePasswordDOM.value){
						document.getElementById('rePasswordInfo').innerHTML='<div class="alert alert-warning" role="alert">两次密码不一致！</div>';
						result = false;
					}else{
						document.getElementById('rePasswordInfo').innerHTML='';
					}
				    if(nameDOM.value==''){
							document.getElementById('nameInfo').innerHTML='<div class="alert alert-warning" role="alert">姓名不能为空！</div>';
							result = false;
					}else{
						document.getElementById('nameInfo').innerHTML='';
					}
				    if(phoneDOM.value==''){
						document.getElementById('phoneInfo').innerHTML='<div class="alert alert-warning" role="alert">电话号码不能为空！</div>';
						result = false;
					}else{
						document.getElementById('phoneInfo').innerHTML='';
					}
				    if(emailDOM.value==''){
						document.getElementById('emailInfo').innerHTML='<div class="alert alert-warning" role="alert">邮箱不能为空！</div>';
						result = false;
					}else{
						document.getElementById('emailInfo').innerHTML='';
					}
				    if(ageDOM.value==''){
						document.getElementById('ageInfo').innerHTML='<div class="alert alert-warning" role="alert">年龄不能为空！</div>';
						result = false;
					}else{
						document.getElementById('ageInfo').innerHTML='';
					}
				    return result;
				}
				    
				</script>
	</body>
</html>